<template>
	<div class="friend-request-list">
		<div class="request-header" @click="isExpanded = !isExpanded">
			<div class="title">
				<el-icon><Bell /></el-icon>
				<span>好友申请</span>
				<el-badge :value="requests.length" :hidden="requests.length === 0" class="request-badge" />
			</div>
			<div class="right-area">
				<el-button link type="primary" @click.stop="loadRequests" :disabled="loading">
					<!-- <el-icon><Refresh /></el-icon> -->
				</el-button>
				<el-icon class="expand-icon" :class="{ 'is-expanded': isExpanded }">
					<ArrowDown />
				</el-icon>
			</div>
		</div>

		<div class="request-content" v-show="isExpanded" v-loading="loading">
			<template v-if="requests.length > 0">
				<div v-for="request in requests" :key="request.id" class="request-item">
					<div class="user-info">
						<head-image 
							:name="request.nickName"
							:url="request.headImage"
							:size="36">
						</head-image>
						<div class="info-detail">
							<span class="nickname">{{ request.nickName }}</span>
							<span class="time">{{ formatTime(request.createTime) }}</span>
						</div>
					</div>
					<div class="action-area">
						<el-button 
							type="primary" 
							size="small" 
							@click="handleRequest(request.id, true)">
							同意
						</el-button>
						<el-button 
							type="danger" 
							size="small" 
							plain
							@click="handleRequest(request.id, false)">
							拒绝
						</el-button>
					</div>
				</div>
			</template>
			<div v-else class="empty-tip">暂无好友申请</div>
		</div>
	</div>
</template>

<script>
// import { Bell, Refresh, ArrowDown } from '@element-plus/icons-vue'
import HeadImage from '../common/HeadImage.vue'
import dayjs from 'dayjs'

export default {
	name: 'FriendRequest',
	components: {
		HeadImage,
		// 移除重复注册的Element Plus图标
		// Bell,
		// Refresh,
		// ArrowDown
	},
	data() {
		return {
			requests: [],
			loading: false,
			isExpanded: false
		}
	},
	created() {
		this.loadRequests()
	},
	methods: {
		loadRequests() {
			this.loading = true
			this.$http({
				url: '/friend/requests',
				method: 'get'
			}).then(data => {
				this.requests = data || []
				if (this.requests.length > 0) {
					this.isExpanded = true
				}
			}).finally(() => {
				this.loading = false
			})
		},
		handleRequest(requestId, isAccept) {
			this.$http({
				url: `/friend/request/${requestId}`,
				method: 'post',
				params: {
					accept: isAccept
				}
			}).then(() => {
				this.$message.success(isAccept ? '已同意好友申请' : '已拒绝好友申请')
				this.loadRequests()
				if (isAccept) {
					this.$emit('refresh-friends')
				}
			})
		},
		formatTime(time) {
			return dayjs(time).format('MM-DD HH:mm')
		}
	}
}
</script>

<style lang="scss" scoped>
.friend-request-list {
	margin-bottom: 10px;
	background-color: var(--el-bg-color);
	border-radius: 4px;
	
	.request-header {
		padding: 8px 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
		user-select: none;
		transition: background-color 0.2s;
		
		&:hover {
			background-color: var(--el-fill-color-light);
		}
		
		.title {
			display: flex;
			align-items: center;
			font-size: 14px;
			color: var(--el-text-color-primary);
			
			.el-icon {
				margin-right: 6px;
				font-size: 16px;
			}
			
			.request-badge {
				margin-left: 6px;
				
				:deep(.el-badge__content) {
					border: none;
				}
			}
		}
		
		.right-area {
			display: flex;
			align-items: center;
			
			.expand-icon {
				font-size: 14px;
				margin-left: 4px;
				transition: transform 0.3s;
				color: var(--el-text-color-secondary);
				
				&.is-expanded {
					transform: rotate(180deg);
				}
			}
		}
	}
	
	.request-content {
		border-top: 1px solid var(--el-border-color-lighter);
		
		.request-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 8px 12px;
			transition: background-color 0.2s;
			
			&:hover {
				background-color: var(--el-fill-color-light);
			}
			
			.user-info {
				display: flex;
				align-items: center;
				
				.info-detail {
					margin-left: 8px;
					
					.nickname {
						display: block;
						font-size: 13px;
						color: var(--el-text-color-primary);
						margin-bottom: 2px;
					}
					
					.time {
						font-size: 12px;
						color: var(--el-text-color-secondary);
					}
				}
			}
			
			.action-area {
				display: flex;
				gap: 6px;
				
				.el-button {
					padding: 4px 8px;
				}
			}
		}
		
		.empty-tip {
			padding: 12px;
			text-align: center;
			color: var(--el-text-color-secondary);
			font-size: 13px;
		}
	}
}
</style> 